<template>
  <view>
    <!-- 轮播图 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(item,index) in swiperList" :key="index">
        <view class="swiper-item">
          <image :src="item.url"></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 智能客服问答 -->
    <view class="home_panel">
      <!-- 中医知识问答 -->
      <!--  <view class="panel">
        <view class="qa_panel">
          <image src="/static/c3.png" class="qa_image"></image>
          <text class="q_a">现代中医知识问答</text>
          <view class="qa_btn">
            去提问
            <uni-icons color="white" type="arrowright" size="15"></uni-icons>
          </view>
        </view>
      </view> -->
      <!-- 绑定设备 -->
      <view class="panel">
        <view class="Binding_left">
          <text>您暂未绑定设备</text>
          <text style="font-size: 12px;color: #afafaf;">温馨提示：成功绑定设备后即可获取监测数据</text>
          <text class="addBinding">+去绑定</text>
        </view>
        <view class="Binding_right"></view>
      </view>
      <!-- 数据面板 -->
      <!-- <view class="panel">
        <view class="data_panel">
          <view class="data_detail"> -->
      <!-- 卡路里 -->
      <!-- <view class="data_calorie">
              <view class="calorie_text">
                <text style="margin-right: 15px;"> 卡路里
                </text>
                <uni-icons type="arrowright" size="15"></uni-icons>
              </view>
              <text style="margin: 8px 0;">0</text>
              <text style="color: #afafaf;">/300千卡</text>
            </view> -->
      <!-- 步数 -->
      <!-- <view class="data_calorie">
              <view class="calorie_text">
                <text style="margin-right: 15px;"> 步数
                </text>
                <uni-icons type="arrowright" size="15"></uni-icons>
              </view>
              <text style="margin: 8px 0;">0</text>
              <text style="color: #afafaf;">/6000步</text>
            </view> -->

      <!-- 距离 -->
      <!--  <view class="data_calorie">
              <view class="calorie_text">
                <text style="margin-right: 15px;"> 距离
                </text>
                <uni-icons type="arrowright" size="15"></uni-icons>
              </view>
              <text style="margin: 8px 0;">1</text>
              <text style="color: #afafaf;">/5公里</text>
            </view> -->

      <!--   </view>
        </view>
      </view> -->
      <!-- 健康指标 -->
      <view class="panel three-content">
        <!-- 3D数字孪生 -->
        <threeContent></threeContent>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 轮播图数据列表
        swiperList: [{
            url: "https://models.vectquant.com/3dmodels/images/first_swiper.png"
          },
          {
            url: "https://models.vectquant.com/3dmodels/images/second_swiper.png"
          }
        ],
      };
    },
    methods: {



    },

    onLoad() {

    },

  }
</script>

<style lang="scss">
  swiper {
    height: 400rpx;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
      background-color: aquamarine;
    }
  }

  .home_panel {
    .panel {
      background-color: white;
      border-radius: 10px;
      margin: 10px;
      padding: 12px 16px;

      .qa_panel {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .qa_image {
          width: 50px;
          height: 50px;
          background-color: aquamarine;
        }

        .q_a {
          text-align: center;
          font-size: 20px;
        }

        .qa_btn {
          background-color: green;
          color: white;
          font-size: 12px;
          padding: 8px;
          border-radius: 16px;
        }
      }

      .Binding_left {
        line-height: 28px;

        display: flex;

        flex-direction: column;

        .addBinding {
          color: red;
          font-size: 14px;
        }
      }

      .data_panel {
        .data_detail {
          display: flex;
          justify-content: space-around;

          .data_calorie {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
          }
        }
      }


    }

    .three-content {
      // width: 100%;
      height: 200px;
    }
  }
</style>